<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Competitive Companion Options</title>

    <style>
      /* Adapted from https://github.com/sindresorhus/notifier-for-github/blob/master/source/options.html */

      body {
        margin: 8px;
        font-size: 14px;
        font-family: sans-serif;
      }

      section {
        padding: 0 18px;
      }

      section h3 {
        margin-left: -18px;
      }

      section input[type='text'] {
        margin-top: 8px;
        width: 100%;
      }

      section p.description {
        font-style: italic;
        color: grey;
      }

      section p.error {
        color: red;
      }

      .custom-rules-row > input {
        width: 40% !important;
      }

      .custom-rules-row > select {
        width: 40%;
      }

      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <section>
      <h3>Custom tools</h3>
      <label for="custom-ports">Custom ports</label>

      <br />

      <input type="text" id="custom-ports" title="Port numbers" />

      <p id="custom-ports-error" class="error hidden">
        Please make sure all ports are valid, and multiple ports are separated by commas.
      </p>

      <p class="description">Specify custom ports to send the parsed data to, separated by commas.</p>
    </section>

    <section>
      <h3>Custom rules</h3>

      <div id="custom-rules-container"></div>

      <p id="custom-rules-error" class="error hidden"></p>

      <p class="description">
        Custom rules can be used to override the parser selection. When a rule's regular expression matches with the url
        of the problem that is being parsed, the parser configured in that rule is used instead of the default parser.
      </p>
    </section>

    <section>
      <h3>Request timeout</h3>

      <label for="request-timeout">Request timeout:</label>
      <input type="number" id="request-timeout" min="1" />

      <p class="description">
        When a problem is sent to the ports a tool could possibly be listening on a timeout is set so requests sent to
        ports with no listening tools aren't kept alive for too long. You should not change this value unless you are
        facing issues with your tools not receiving the problem data after clicking the "+" button when they should be.
      </p>
    </section>

    <section>
      <h3>Debugging</h3>

      <input type="checkbox" id="debug-mode" />
      <label for="debug-mode">Debug mode</label>

      <p class="description">
        If debug mode is enabled, all the JSON data that is sent is logged to the console as well.
      </p>
    </section>

    <script src="js/options.js"></script>
  </body>
</html>
